<template>
    <div class="siteConfig">
      <el-col :span="12">
        <el-form :model="siteForm" v-loading="siteLoading" :rules="siteRules" label-width="192px" ref="siteRefs" class="siteCls">
          <el-form-item prop="isOpen">
            <template v-slot:label>站点开启  <el-tooltip class="item" effect="dark" content="站点开始|关闭（用于升级等临时关闭）" placement="top-start"><i class="el-icon-info" /></el-tooltip></template>
            <el-radio-group v-model="siteForm.isOpen">
              <el-radio :label="0">开启</el-radio>
              <el-radio :label="1">关闭</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item prop="webSiteName">
            <template v-slot:label>网站名称  <el-tooltip class="item" effect="dark" content="网站名称很多地方会显示的，建议认真填写" placement="top-start"><i class="el-icon-info" /></el-tooltip></template>
            <el-input v-model="siteForm.webSiteName" type="text" placeholder="网站名称很多地方会显示的，建议认真填写"></el-input>
          </el-form-item>
          <el-form-item prop="webSiteUrl">
            <template v-slot:label>网站地址  <el-tooltip class="item" effect="dark" content="网站链接，不要轻易修改" placement="top-start"><i class="el-icon-info" /></el-tooltip></template>
            <el-input v-model="siteForm.webSiteUrl" type="text" placeholder="站点链接，不要轻易修改"></el-input>
          </el-form-item>
          <el-form-item>
            <template v-slot:label>网站描述  <el-tooltip class="item" effect="dark" content="网站描述" placement="top-start"><i class="el-icon-info" /></el-tooltip></template>
            <el-input v-model="siteForm.webSiteDescription" :rows="2" type="textarea" placeholder="网站描述"></el-input>
          </el-form-item>
          <el-form-item>
            <template v-slot:label>后台LOGO  <el-tooltip class="item" effect="dark" content="后台LOGO" placement="top-start"><i class="el-icon-info" /></el-tooltip></template>
            <div class="upLoadPicBox">
              <div v-if="siteForm.logoImage" class="pictrue">
                <el-image ref="backLogoLargePreView" class="imgHover" :src="$uploadURL(siteForm.logoImage)" :preview-src-list="[$uploadURL(siteForm.logoImage)]"></el-image>
                <div class="upload_cover_preview">
                  <i @click.stop="largePreview('backLogoLargePreView')" class="iconfont icon-yanjing"></i>
                  <i @click.stop="delLarge('logoImage')" class="el-icon l-upload el-icon-delete"></i>
                </div>
              </div>
              <div @click="modalPicTap('1', 'logoImage')" v-else class="upLoad"><i class="el-icon l-upload el-icon-camera-solid"></i></div>
            </div>
          </el-form-item>
          <el-form-item>
            <template v-slot:label>后台登录页LOGO  <el-tooltip class="item" effect="dark" content="后台登录页LOGO，建议尺寸270x75" placement="top-start"><i class="el-icon-info" /></el-tooltip></template>
            <div class="upLoadPicBox">
              <div v-if="siteForm.logoImage_Login" class="pictrue">
                <el-image ref="backTokenLogoLargePreView" class="imgHover" :src="$uploadURL(siteForm.logoImage_Login)" :preview-src-list="[$uploadURL(siteForm.logoImage_Login)]"></el-image>
                <div class="upload_cover_preview">
                  <i @click.stop="largePreview('backTokenLogoLargePreView')" class="iconfont icon-yanjing"></i>
                  <i @click.stop="delLarge('logoImage_Login')" class="el-icon l-upload el-icon-delete"></i>
                </div>
              </div>
              <div @click="modalPicTap('1', 'logoImage_Login')" v-else class="upLoad"><i class="el-icon l-upload el-icon-camera-solid"></i></div>
            </div>
          </el-form-item>
          <el-form-item prop="logoImage_Login_Wap">
            <template v-slot:label>移动端登录LOGO  <el-tooltip class="item" effect="dark" content="移动端登录logo，建议png格式(尺寸:180*180)" placement="top-start"><i class="el-icon-info" /></el-tooltip></template>
            <div class="upLoadPicBox">
              <div v-if="siteForm.logoImage_Login_Wap" class="pictrue">
                <el-image ref="moveLargePreView" class="imgHover" :src="$uploadURL(siteForm.logoImage_Login_Wap)" :preview-src-list="[$uploadURL(siteForm.logoImage_Login_Wap)]"></el-image>
                <div class="upload_cover_preview">
                  <i @click.stop="largePreview('moveLargePreView')" class="iconfont icon-yanjing"></i>
                  <i @click.stop="delLarge('logoImage_Login_Wap')" class="el-icon l-upload el-icon-delete"></i>
                </div>
              </div>
              <div @click="modalPicTap('1', { name: 'logoImage_Login_Wap', ref: 'siteRefs' })" v-else class="upLoad"><i class="el-icon l-upload el-icon-camera-solid"></i></div>
            </div>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="24">
        <el-col :span="3">
          <el-row type="flex" justify="end">
            <el-button type="primary" @click="submitAddSite('siteRefs')" :loading="loadingBtn">提交</el-button>
          </el-row>
        </el-col>
      </el-col>
    </div>
</template>

<script>
  import {
    getSysSiteConfigApi,
    putSysSiteConfigApi
  } from '@/api/setting';

  export default {
    name: "index",
    data() {
      return {
        loadingBtn: false,
        siteLoading: false,
        siteRules: {
          isOpen: [
            { required: true, message: '请选择站点是否打开', trigger: 'change' }
          ],
          webSiteName: [
            { required: true, message: '请填写网站名称', trigger: 'change' }
          ],
          webSiteUrl: [
            { required: true, message: '请填写网站地址', trigger: 'change' }
          ],
          logoImage_Login_Wap: [
            { required: true, message: '请上传前台登录页LOGO', trigger: 'change' }
          ]
        },
        siteForm: {
          isOpen: 0,
          webSiteName: '',
          webSiteUrl: '',
          webSiteDescription: '',
          logoImage: '',
          logoImage_Login: '',
          logoImage_Login_Wap: ''
        }
      };
    },
    mounted() {
      this.getSysSiteConfig();
    },
    methods: {
      // 删除图片
      delLarge(name) {
        this.$set(this.siteForm, name, '');
      },
      // 大图预览
      largePreview(ref) {
        this.$refs[ref].clickHandler();
      },
      modalPicTap(num, name) {
        console.log(typeof name);

        const _this = this
        _this.$modalUpload(function(img) {
          if (typeof name === 'object' && name) {
            _this.$set(_this.siteForm, name.name, img[0].path);
            _this.$refs[name.ref].validateField(name.name);
          } else _this.$set(_this.siteForm, name, img[0].path);
        }, num, 'store')
      },
      // 获取商城系统设置
      getSysSiteConfig() {
        this.$set(this, 'siteLoading', true);
        getSysSiteConfigApi().then(res => {
          this.$set(this, 'siteForm', res);
          this.$set(this, 'siteLoading', false);
        }).catch(() => {
          this.$set(this, 'siteLoading', false);
        });
      },
      submitAddSite(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$set(this, 'loadingBtn', true);
            putSysSiteConfigApi(this.siteForm).then(res => {
              this.$message.success('修改成功');
              this.getSysSiteConfig();
              this.$set(this, 'loadingBtn', false);
            }).catch(() => {
              this.$set(this, 'loadingBtn', false);
            });
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      }
    }
  }
</script>

<style scoped>

</style>
